<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>Test Runner</title>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/js/logger.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" charset="utf-8">
		    
		    var duration = 15;
            var secondsUntilError = 1.5 * 60;

            var revision;

	        var browserName = $.browser.name + ' ' + $.browser.version + 
	            '/' + $.os.name;
	        var url = '/tests?browser='+browserName;
	    
			$(document).ready(function(){			    
			    var seconds = duration;
			    $('.seconds').html(seconds);
			    setInterval(function(){
			        if(seconds > 0){
    			        $('.seconds').css('background-color', '#6E6E6E');
    			        seconds--;
    			        $('.seconds').html(seconds);
    			        if(seconds === 0){
                            jQuery.ajax({
                                url: url,
                                success: function(data, status){
                                    if(data.length === 0){
                                        seconds = duration;
                                    }else{
                                        revision = getParameterByName('r', data);
                                        runTest(data);
                                        // window.location = data;
                                    }                                    
                                },
                                error: function(){
                                    seconds = duration;
                                }
                            })
    			        }
    			        setTimeout(function(){
        			        $('.seconds').css('background-color', 'black');			            
    			        }, 200);			            
			        }
			    }, 1000);
                
                $('.yourBrowser').html(browserName);
                
                function runTest(url){
                    $(document.body).append('<iframe src="'+url+'&runner='+window.location.href+'" name="testrunner" width="100%" height="50%"></iframe>');
                    $(document.body).append('<p>Test will timeout and error will be logged if not completed in the next <span class="timeout">'+secondsUntilError+'</span> seconds</p>');
                    checkTest(url);
                }
                
                var secondsRunning = 0;
                function checkTest(){
                    secondsRunning++;
                    if(secondsRunning > secondsUntilError){
                        $.ajax({
                            url: '/tests',
                            type: 'POST',
                            data: {
                                data: '{"total": 0, "browserName": "'+browserName+'", "failures": ["timed out"], "supported": true, "error": true, "revision": "'+revision+'", "ua": "'+navigator.userAgent+'"}'
                            },
                            complete: function(d, e){
                                window.location.reload(true);
                            }
                        });
                    }else{
                        $('.timeout').html(secondsUntilError - secondsRunning);
                        $('.timeout').css('background-color', '#6E6E6E');
                        setTimeout(checkTest, 1000);
                        setTimeout(function(){
        			        $('.timeout').css('background-color', 'black');			            
    			        }, 200);
                    }
                }
			});
		</script>
		<style type="text/css" media="screen">
		    .seconds, .timeout {
		        padding:5px;
		        font-size:24px;
		        background-color:black;
		        color:white;
		        border:solid 2px #5D5D5D;
		    }
		</style>
    </head>
    <body>
        <p class="countdown">Checking for new tests in <span class="seconds"></span> seconds</p>
        <p class="purpose">
            By keeping your browser pointed at this page, you are ensuring new
            updates of the following projects are tested against 
            <strong><span class="yourBrowser"></span></strong>
        </p>
        <ul class="projects">
            {% for project in projects %}
                <li><a href="{{project.url}}">{{project.name}}</a></li>
            {% endfor %}
        </ul>
    </body>
</html>